<script setup>
import OImage from "../setting/Images.vue";
import AlphaColor from "../setting/AlphaColor.vue";
import Color from "../setting/Color.vue";
import Slider from "../setting/Slider.vue";

const props = defineProps({
  config: {
    type: Object,
    required: true,
  },
  name: {
    type: String,
    default: "",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});

const emits = defineEmits(["update:config", "change"]);

const form = ref({
  $position: { left: 0, top: 0 },
  $size: { width: 255, height: 104 },
  $positionType: "relative",
  showBgImg: true,
  signBgImg: "./imagesStatic/activity/signBoard_bg.png",
  zonePosition: { top: 10, left: 28 },
  zoneSize: { width: 200, height: 65 },
  color: "#ffffff",
  fontSize: 13,
  dayFontSize: 32,
  borderRadius: 0,
});

const typeList = [
  { label: "默认", key: "relative" },
  { label: "浮动", key: "absolute" },
];

const detail = computed({
  get: () => {
    return Object.assign({}, form.value, props.config);
  },
  set: (val) => {
    emits("update:config", val);
    emits("change", val);
  },
});

const changePositionType = () => {
  detail.value.$position = { left: 0, top: 0 };
  onChange();
};

const onChange = (val) => {
  detail.value = detail.value;
};

onMounted(() => {
  nextTick(() => {
    onChange();
  });
});
</script>
<template>
  <el-form :model="detail" :disabled="disabled" label-width="auto">
    <el-form-item label="位置类型">
      <el-radio-group
        v-model="detail.$positionType"
        @change="changePositionType"
      >
        <el-radio v-for="item in typeList" :label="item.key">{{
          item.label
        }}</el-radio>
      </el-radio-group>
    </el-form-item>
    <Color
      v-model="detail.color"
      name="文字颜色"
      tip="描述文字"
      @change="onChange"
    />
    <Slider
      v-model="detail.borderRadius"
      name="圆角"
      :min="0"
      :max="100"
      @change="onChange"
    />
    <Slider
      v-model="detail.fontSize"
      name="文字大小"
      :min="12"
      :max="36"
      tip="描述文字"
      @change="onChange"
    />
    <Slider
      v-model="detail.dayFontSize"
      name="文字大小"
      :min="12"
      :max="36"
      tip="累计天数"
      @change="onChange"
    />
    <AlphaColor
      v-model="detail.backgroundColor"
      name="背景色"
      @change="onChange"
    />
    <OImage
      v-model="detail.signBgImg"
      v-model:show="detail.showBgImg"
      v-model:size="detail.$size"
      name="背景图片"
      @change="onChange"
    />
  </el-form>
</template>
